<table class="table table-bordered  table-hover border-bottom mb-0" data-bind="css:_css">
    <thead class="thead-light" >
    <tr>
        <!-- ko foreach:_displayFields -->
        <!-- ko if:name == 'rowId' || name == 'rowCheck' -->
        <th scope="col" data-bind="text:alias" class="xgx-grid-row-col-header  text-center"></th>
        <!-- /ko -->
        <!-- ko ifnot:name == 'rowId' || name == 'rowCheck' -->
        <th scope="col" data-bind="text:alias" class="xgx-grid-col-data "></th>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if:showOperation-->
        <th scope="col" class="xgx-grid-col-operation  text-center">操作</th>
        <!-- /ko -->
    </tr>
    </thead>
    <tbody>
    <!-- ko foreach:store.records() -->
    <tr data-bind="css:$parent._calculateTrCss($data)">
        <!-- ko foreach:$parent._displayFields -->
        <!-- ko if:name == 'rowCheck' -->
        <th scope="row" class="text-center">
            <input class="align-middle xgx-grid-cell-check" type="checkbox" data-bind="checked:$parent[name]">
        </th>
        <!-- /ko -->
        <!-- ko if:name == 'rowId' -->
        <th scope="row" class="text-center align-middle" data-bind="text:$parent[name]"></th>
        <!-- /ko -->
        <!-- ko ifnot: name == 'rowId' || name=='rowCheck' -->
        <!-- ko with:{record:$parent,field:$data} -->
        <td class="align-middle" data-bind="css:field._css,event:field._event">
            <!-- ko component:{name:field._columnCmp.name,params:$data} --><!-- /ko -->
        </td>
        <!-- /ko -->
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if:$parent.showOperation-->
        <td class="text-center align-middle">
            <!-- ko if:$parent._operationType == 'icon' -->
            <!-- ko foreach:$parent._operations -->
            <span data-bind="css:css,click:function(){$parents[1]._onOperation($data,$parents[0]);},attr:{title:title}"></span>
            <!-- /ko -->
            <!-- ko foreach:_operations -->
            <span data-bind="css:css,click:function(){$parents[1]._onOperation($data,$parents[0]);},attr:{title:title}"></span>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko if:$parent._operationType == 'dropdown' -->
            <div class="">
                <button class="btn  dropdown-toggle pl-1 pr-1 pt-0 pb-0" type="button" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">操作
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <!-- ko with:{withOperation:$parent._calculateOperation($data)} -->
                    <!-- ko foreach:withOperation -->
                    <span class="dropdown-item"
                          data-bind="text:title,click:function(){$parents[2]._onOperation($data,$parents[1]);}"></span>
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko foreach:_operations -->
                    <span class="dropdown-item"
                          data-bind="text:title,click:function(){$parents[1]._onOperation($data,$parents[0]);}"></span>
                    <!-- /ko -->
                </div>
            </div>
            <!-- /ko -->
        </td>
        <!-- /ko -->
    </tr>
    <!-- /ko -->
    </tbody>
</table>
